<template>
    <div class="detail-container">
        <!-- 基础信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 class="section-header blue">基础信息</h3>
                <div class="info-row">
                    <div class="info-item">销售员编号：<span>{{ orderApplicationDetail.saleCode }}</span></div>
                    <div class="info-item">销售员：<span>{{ orderApplicationDetail.saleName }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
                <div class="info-row">
                    <div class="info-item">申请时间：<span>{{ orderApplicationDetail.applicationDate }}</span></div>
                    <div class="info-item">申请理由：<span>{{ orderApplicationDetail.applicationReason }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
                <div class="info-row">
                    <div class="info-item">客户编号：<span>{{ orderApplicationDetail.customerCode }}</span></div>
                    <div class="info-item">客户名称：<span>{{ orderApplicationDetail.customerName }}</span></div>
                    <div class="info-item">客户公司名称：<span>{{ orderApplicationDetail.customerCompanyName }}</span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">客户类别：<span>{{ orderApplicationDetail.customerCategory }}</span></div>
                    <div class="info-item">联系人：<span>{{ orderApplicationDetail.contactName }}</span></div>
                    <div class="info-item">联系电话：<span>{{ orderApplicationDetail.contactPhone }}</span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">公司地址：<span>{{ orderApplicationDetail.companyAddress }}</span></div>
                    <div class="info-item">收货地址：<span>{{ orderApplicationDetail.deliveryAddress }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>

            </div>
        </el-card>



        <el-card class="box-card">
            <div class="info-section">
                <h3 class="section-header green">订单信息</h3>
                <div class="info-row">
                    <div class="info-item">订单申请编号：<span>{{ orderApplicationDetail.code }}</span></div>
                    <div class="info-item">付款方式：<span>{{ paymentText }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
                <div class="info-row">
                    <div class="info-item">是否免付定金：<span>{{ depositText}}</span></div>
                    <div class="info-item">定金金额：<span>￥：{{ orderApplicationDetail.depositAmount }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
                <div class="info-row">
                    <div class="info-item">订单种类：<span>{{ orderTypeText }}</span></div>
                    <div class="info-item">特价折扣：<span>{{ orderApplicationDetail.discount }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>

            </div>
        </el-card>


        <el-card class="box-card">
            <div class="info-section">
                <h3 class="section-header orange">产品信息</h3>
                <div>
                    <el-table :data="tableData" style="width: 100%" border>
                        <el-table-column prop="productName" label="产品名称"></el-table-column>
                        <el-table-column prop="productStock" label="库存"></el-table-column>
                        <el-table-column prop="productCount" label="数量"> </el-table-column>
                        <el-table-column prop="productDescription" label="产品描述"></el-table-column>
                        <el-table-column prop="productPrice" label="产品价格"></el-table-column>
                    </el-table>
                </div>
                <div class="info-row">
                    <div class="info-item">订单金额：<span>￥：{{ orderApplicationDetail.orderPrice }}</span></div>
                    <div class="info-item">税额：<span>￥：{{ orderApplicationDetail.tax }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>

            </div>
        </el-card>



        <div class="button-group fixed-buttons-horizontal">
            <el-button @click="refuseVisible = true">拒绝申请</el-button>
            <el-button type="primary" @click="passVisible = true">通过申请</el-button>
        </div>

        <!--        //通过申请弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="是否确认通过审批" :visible.sync="passVisible" width="70%" custom-class="custom-dialog"
            :close-on-click-modal="false">
            <div class="dialog-content">
                <div class="confirm-item">
                    <span class="dialog-label">选择下一级审批人：</span>
                    <el-select placeholder="请选择" class="custom-select" v-model="orderApplication.approverZJ">
                        <el-option v-for="sale in zongJianList" :key="sale.code" :label="sale.realName"
                            :value="sale.code">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-btn" @click="passVisible = false">取 消</el-button>
                <el-button type="primary" class="confirm-btn" @click="passjlApplication">确认发送审批</el-button>
            </div>
        </el-dialog>
        <!--        //通过申请弹框结束----------------------------------------------------------------------------------------------------->
        <!--        //拒绝申请弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="是否确认拒绝审批" :visible.sync="refuseVisible" width="70%" custom-class="custom-dialog"
            :close-on-click-modal="false">
            <div class="dialog-content">
                <div class="confirm-item">
                    <span class="dialog-label">拒绝理由：</span>
                    <el-input type="textarea" :rows="3" placeholder="请输入拒绝理由" class="custom-textarea"
                        v-model="orderApplication.refuseReason">
                    </el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-btn" @click="refuseVisible = false">取 消</el-button>
                <el-button type="primary" class="confirm-btn" @click="refuseApplication">确认拒绝申请</el-button>
            </div>
        </el-dialog>
        <!--        //拒绝申请弹框结束----------------------------------------------------------------------------------------------------->
    </div>
</template>

<script>
export default {

    data() {
        return {
            orderApplicationCode: '',
            orderApplication: {},
            passVisible: false,
            refuseVisible: false,
            zongJianList: [],//总监列表
            tableData: [],
            orderApplicationDetail: {},
        }
    },
    methods: {
        queryBasicInfo() {

        },
        queryOrderInfo() {

        },
        queryAllZongJian() {
            const roleId = 1;
            this.$axios.get("/api/order-server/uums/queryAllSale/" + roleId)
                .then(resp => {
                    console.log(resp.data)
                    if (resp.data.code == 200) {
                        this.zongJianList = resp.data.data
                    }
                })
        },
        refuseApplication() {
            this.$confirm('是否确认拒绝申请', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                //点击确定再发送请求
                this.orderApplication.code = this.orderApplicationCode;
                this.orderApplication.status = 1;
                this.$axios.post("/api/order-server/zsbOrder/refuseApplication", this.orderApplication)
                    .then(resp => {
                        console.log(resp)
                        if (resp.data.code == 200) {
                            this.$message.success('拒绝申请成功！');
                            this.refuseVisible = false;
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });

        },
        passjlApplication() {
            this.$confirm('是否确认通过申请', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                //点击确定再发送请求
                this.orderApplication.code = this.orderApplicationCode;
                this.orderApplication.status = 2;
                
                this.$axios.post("/api/order-server/zsbOrder/passjlApplication", this.orderApplication)
                    .then(resp => {
                        console.log(resp)
                        if (resp.data.code == 200) {
                            this.$message.success('通过申请成功！等待总监审批！');
                            this.passVisible = false;
                            
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        queryDetail() {
            this.$axios.get("/api/order-server/zsbOrder/queryDetail/" + this.orderApplicationCode)
                .then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.orderApplicationDetail = resp.data.data
                        this.tableData = this.orderApplicationDetail.zsbOrderApplicationProductList
                    }
                })
        }
    },
    created() {
        this.orderApplicationCode = this.$route.query.orderApplicationCode;
        this.queryAllZongJian();
        this.queryDetail();

    },
    computed: {
        paymentText() {
            return this.orderApplicationDetail.payment == 0 
                ? '先发货后付款' 
                : '先付款后发货';
        },
        depositText() {
            return this.orderApplicationDetail.deposit == 0 
                ? '是' 
                : '否';
        },
        orderTypeText() {
            return this.orderApplicationDetail.orderType == 0 
                ? '正常订单' 
                : '特价订单';
        }
    },
}
</script>

<style scoped>
.detail-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
}

.box-card {
    margin-bottom: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: none;
}

.box-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.section-header {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.section-header.blue {
    background: linear-gradient(135deg, #409EFF, #3a8ee6);
}

.section-header.green {
    background: linear-gradient(135deg, #13d941, #0fb835);
}

.section-header.orange {
    background: linear-gradient(135deg, #dc780e, #d35d0c);
}

.info-section {
    padding: 10px 20px;
}

.info-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    gap: 20px;
}

.info-item {
    flex: 1;
    max-width: 380px;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 8px;
    color: #606266;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.info-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-item span {
    margin-left: 10px;
    padding: 4px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    color: #303133;
    font-weight: normal;
    display: inline-block;
    min-width: 120px;
}

/* 表格样式优化 */
.el-table {
    margin: 15px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.el-table th {
    background: linear-gradient(to right, #f8f9fa, #ffffff) !important;
    color: #303133;
    font-weight: bold;
    padding: 15px 0;
}

.el-table td {
    padding: 12px;
    color: #606266;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #fafbfc;
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #f5f7fa;
}

/* 按钮组样式优化 */
.fixed-buttons-horizontal {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.el-button {
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-button+.el-button {
    margin-left: 15px;
}


/* 弹窗样式 */
.custom-dialog {
    border-radius: 16px;
    overflow: hidden;
}

.dialog-content {
    padding: 20px 10px;
}

.confirm-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.dialog-label {
    font-size: 15px;
    color: #606266;
    margin-right: 10px;
    min-width: 120px;
}

.custom-select {
    width: 280px;
}

.custom-textarea {
    width: 100%;
    margin-top: 10px;
}

.custom-textarea :deep(.el-textarea__inner) {
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    transition: all 0.3s;
}

.custom-textarea :deep(.el-textarea__inner:focus) {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.dialog-footer {
    text-align: right;
    padding-top: 20px;
}

.cancel-btn {
    margin-right: 12px;
}

.confirm-btn {
    padding-left: 25px;
    padding-right: 25px;
}

/* 覆盖 Element UI 默认样式 */
:deep(.el-dialog__header) {
    padding: 20px 25px;
    background: #f8f9fa;
    margin-right: 0;
}

:deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

:deep(.el-dialog__headerbtn) {
    top: 20px;
    right: 20px;
}

:deep(.el-dialog__body) {
    padding: 30px 25px;
}

:deep(.el-select-dropdown__item) {
    padding: 8px 15px;
}

:deep(.el-select-dropdown__item.selected) {
    font-weight: 600;
    color: #409EFF;
}
</style>